<template>
  <el-dialog title="角色授权" :visible.sync="dialogShow" @close="closeDialog">
    <!-- 权限是一颗树 -->
    <!-- 将数据绑定到组件上 -->
    <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
    <!-- id作为唯一标识 -->
    <el-tree
      ref="tree"
      :data="authList"
      :props="{label:'name'}"
      show-checkbox
      :check-strictly="true"
      :default-checked-keys="checkAuth"
      node-key="id"
    />
    <!-- 确定 取消 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnAuthOK">确定</el-button>
        <el-button size="small" @click="dialogShow = false">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
import { getPermissionListApi } from '@/api/permission'
import { tranListToTreeData } from '@/utils'
import { getRoleInfoApi, setRoleAuthApi } from '@/api/setting'
export default {
  name: 'SetAuth',
  data() {
    return {
      dialogShow: false,
      authList: [],
      checkAuth: [], // 选中的权限Id数组
      roleId: null
    }
  },
  methods: {
    closeDialog() {
      this.roleId = null
      this.checkAuth = []
    },
    async btnAuthOK() {
      const permIds = this.$refs.tree.getCheckedKeys()
      if (permIds.length === 0) return this.$message.warning('勾选节点')
      await setRoleAuthApi({
        id: this.roleId,
        permIds
      })
      this.$message.success('关联权限成功')
      this.dialogShow = false
    },
    async getAllAuthList() {
      const res = await getPermissionListApi()
      //   console.log(res)
      this.authList = tranListToTreeData(res, '0')
    },
    // 获取当前角色信息
    async getCurRoleInfo(id) {
      this.roleId = id
      const res = await getRoleInfoApi(id)
      console.log(res)
      this.checkAuth = res.permIds
    }
  }
}
</script>

<style>

</style>
